<template>
	<view class="">
		<view class="classify">
			<!-- 侧边导航栏 -->
			<scroll-view class="nav" scroll-y="true" :scroll-top="scrollLeftTop" scroll-with-animation>
				<view v-for="(item, index) in classList" @tap="changenav(item)" :key="item.id"
					:class="['nav_item','shenglueh', navindex == item.id ? 'nav_item_choose' : '']">
					<span :class="[navindex == item.id ? 'line1' : '']">{{item.name}}</span>

				</view>
			</scroll-view>
			<!-- 右侧商品 -->
			<view class="product">
				<scroll-view scroll-y="true" :scroll-top="scrollTopGoods" class="scroll_product">
					<view class="classify_two">
						<view class="product_item">
							<!-- <view class="product_item_item" v-for="(items, key) in classListShow" :key="key"
								@tap="toproduct(items)">
								<image :src="items.img" mode="aspectFill"></image>
								<view class="title">
									{{items.name}}
								</view>
							</view> -->
							<view v-for="(items, key) in classListShow" :key="key" @tap="toproduct(items)" style="display: flex;margin-top: 28rpx;">
								
								 <view class="" >
								 	<image :src="items.cover" style="width: 160rpx;height: 160rpx;border-radius: 10rpx;" mode=""></image>
								 </view>
								 <view class="" style="margin-left: 16rpx;height: 160rpx;display: flex;flex-direction: column;justify-content: space-between;">
								 	<view class="ellipsis-2" style="font-size:32rpx">
								 		{{items.name}}
								 	</view>
									<view class="" style="display: flex;align-items: flex-end;">
										<view class="" style="color: #E83F3F;font-weight: bold;">
											<span style="font-size: 24rpx;">￥</span>
											<span style="font-size: 36rpx;">{{items.price}}</span>
										</view>
										<view class="" style="margin-left: 10rpx;color: #9A9A9A;font-size: 24rpx;text-decoration: line-through;margin-bottom: 4rpx;">
											<span>￥</span>
											<span>{{items.cost_price}}</span>
										</view>
									</view>
								 </view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		<!-- 	<view>
						 
				<view v-for="(items, key) in classListShow" :key="key" @tap="toproduct(items)" style="display: flex;margin-top: 20rpx;">
					
					 <view class="" >
					 	<image :src="items.cover" style="width: 160rpx;height: 160rpx;border-radius: 10rpx;" mode=""></image>
					 </view>
					 <view class="" style="margin-left: 16rpx;height: 160rpx;display: flex;flex-direction: column;justify-content: space-between;">
					 	<view class="ellipsis-2">
					 		{{items.name}}
					 	</view>
						<view class="" style="display: flex;align-items: center;">
							<view class="" style="color: #E83F3F;font-weight: bold;">
								<span style="font-size: 20rpx;">￥</span>
								<span style="font-size: 32rpx;">{{items.price}}</span>
							</view>
							<view class="" style="margin-left: 10rpx;color: #9A9A9A;font-size: 24rpx;text-decoration: line-through;">
								<span>￥</span>
								<span>{{items.cost_price}}</span>
							</view>
						</view>
					 </view>
				</view>
			
			</view> -->

		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref,defineEmits } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import tools from '@/utils/tools'
	const props = defineProps({
		classList: {
			type: Array as any,

		},
		classListShow: {
			type: Array as any
		}
	})
	const emit = defineEmits(['changenav'])
	const navindex = ref(0)
	const scrollTopGoods = ref(0)
	const scrollLeftTop = ref(0)
	const changenav = (item : any) => {
		navindex.value = item.id;
		emit('changenav',navindex.value)
	}
	const toproduct = (item : any) => {
	tools.navTo('/pagesB/goods/goodsDetail?id=' + item.id);
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	
	.classify {
		display: flex;
		padding-right: 15upx;
		box-sizing: border-box;
		height: calc(100vh - 730rpx);
		// justify-content: space-between;
	}

	.line1 {
		border-bottom: 1rpx solid #354678;
	}

	.nav {
		height: calc(100vh - 730rpx);
		width: 180rpx;
		margin-right: 10px;
		background-color: #F5F5F5;
		border-right: 1px solid #F9F9F9;

		.nav_item {
			background-color: #F5F5F5;
			width: 180rpx;
			height: 100upx;
			font-size: 28rpx;
			color: #333333;
			text-align: center;
			box-sizing: border-box;
			line-height: 100upx;
		}

		.nav_item_choose {
			background-color: #FFFFFF;
			position: relative;
			color: #354678;
			font-weight: bold;
			text-align: center;
		}
	}
	.ellipsis-2{
		// 注意，不要设置此标签的高度，下方代码设置了行数，会自动根据行数进行计算高度的。
		
		//文本超出部分以...形式展示
		text-overflow: -o-ellipsis-lastline;
		//整体超出部分隐藏
		overflow: hidden;
		//文本超出部分以...形式展示，同第一行样式代码
		text-overflow: ellipsis;
		//display 块级元素展示
		display: -webkit-box;
		//设置文本行数为2行
		-webkit-line-clamp: 2;
		//设置文本行数为2行
		line-clamp: 2;
		//从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
		-webkit-box-orient: vertical;

	}
	.product {
		width: 100%;
		margin-top:10rpx;
		.scroll_product {
			width: 100%;
			height: calc(100vh - 600rpx);
		}
	
		.classify_two {
			padding-bottom: 160rpx;
			.product_item {
				display: flex;
				flex-wrap: wrap;
	
				.product_item_item {
					width: 33.33%;
					height: 200upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					margin-top: 26rpx;
	
					image {
						width: 160upx;
						height: 160upx;
						display: block;
						margin: auto;
					}
	
					.title {
						font-size: 28rpx;
						color: #000000;
						margin-top: 12rpx;
					}
				}
			}
		}
	}
	
	.shopInfo_b {
		width: 100%;
		height: calc(100vh - 662rpx);
	
		.shopInfo_s {
			display: flex;
			align-items: center;
			height: 180rpx;
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #EEEEEE;
	
			.shopImage {
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
			}
	
			.shopR {
				height: 100%;
				width: 332rpx;
				margin-left: 20rpx;
	
				.shopR_t {
					width: 100%;
					font-size: 30rpx;
					line-height: 44rpx;
					height: 88rpx;
					color: #000000;
	
				}
	
				.shopR_b {
					margin-top: 52rpx;
					width: 100%;
					display: flex;
					justify-content: space-between;
	
					.shopR_b_l {
						font-size: 32rpx;
						color: #000000;
						display: flex;
						align-items: flex-end;
	
						.oldP {
							font-size: 20rpx;
							line-height: 32rpx;
							color: #999999;
							margin-left: 8rpx;
							text-decoration: line-through;
						}
					}
	
					.shopR_b_r {
						width: 44rpx;
						height: 44rpx;
						// background: #F2A450;
						// border-radius: 50%;
					}
				}
			}
		}
	}
</style>